import { ResearchItem } from '../../services/ResearchService';
import { useHistory } from 'react-router';
import {  EyeOutlined, HeartOutlined, StarOutlined } from '@ant-design/icons';
import eventBus from '../../utils/eventBus';
import '../Main/Main.scss';

interface ReseatchItemProps {
    key: any;
    item: ResearchItem;
}

function ResearchItemPage(props: ReseatchItemProps) {
    var item: ResearchItem = props.item;
    let history = useHistory();
    return (
        <div key={props.key} role="listitem" className="collection-item-2 w-dyn-item w-col w-col-4 researchItem" onClick={() => {
            window.scrollTo(0, 0);
            eventBus.emit('changeWhiteHeaderBg',true);
            history.push(`/researchDetail/${item.id}`);
        }}><a
            href="javascript:;" className="link-block-4 w-inline-block">
            <div className="div-block-39">
                <div style={{ backgroundImage: `url(${item.thumb})` }}
                    className="div-block-46"><img
                        src="https://uploads-ssl.webflow.com/5d1f262a719f5884d8fee399/5fb47b1dacc0cadae640ead0_white_weave_bottom_div.svg"
                        loading="lazy" alt="" className="image-23" /></div>
                <div className="div-block-40">
                    <h4 className="heading-17">{item.title}.</h4>
                    <p className="paragraph-8">{item.content}.</p>
                    <div className="div-block-41">
                    <div className="view-left">
                               <EyeOutlined />
                               <div className="viewCount">{item.viewcount}</div>
                               <StarOutlined style={{ color: item.isfollow === 1 ? '#1c2437' : 'inherit',marginLeft:'10px',marginRight:'10px' }} />
                               <HeartOutlined style={{ color: item.islike === 1 ? '#1c2437' : 'inherit' }} />
                           </div>
                        <div>
                            <div className="text-block-9">{item.createtime.slice(0, 16)}</div>
                        </div>
                      
                    </div>
                </div>
            </div>
        </a></div>
    );
}

export default ResearchItemPage;

